<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">
    <title>北工商喵～</title>
    <!--  Android 5 Chrome Color-->
    <meta name="theme-color" content="#EE6E73">
    <script src="lib/js/materialize.js"></script>
    <script src="js/index.js"></script>
    <script src="lib/js/marked.js"></script>
    <script nomodule="1" src="js/nomodule.js"></script>
    <script async src="js/plus.js"></script>
    <script async src="js/user.js" async="1"></script>
    <link href="fonts/gicon.css" rel="stylesheet">
    <link href="lib/css/materialize.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">

</head>

<body onload="init()">
    <header>
        <!--顶部的标题，通过ctab函数更改-->
        <nav id="top-nav">
            <div class="container">
                <div class="nav-wrapper">
                    <div class="row">
                        <div class="col s12 m10 offset-m1">
                            <h1 class="nav pink-font" id="NavTitle"></h1>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
        <!--手机上的按钮-->
        <div class="container">
            <a href="#!" id="slide-menu" data-target="slide-out" class="sidenav-trigger">
                <i class="material-icons" style="font-size: 2.5rem;">menu</i>
            </a>
        </div>
        <!--侧边栏-->
        <ul id="slide-out" class="sidenav sidenav-fixed z-depth-0">
            <li class="brand-logo" style="width: 250px;padding-left: 25px;"><img src="img/btbu_long.png" style="width: 250px;"/></li>
            <li><a class="waves-effect waves-teal sidenav-close" href="#tab/1" onclick="ctab('tab1')">主页</a></li>
            <li><a class="waves-effect waves-teal sidenav-close" href="#tab/2" onclick="ctab('tab2','软件下载')">软件下载</a></li>
            <li><a class="waves-effect waves-teal sidenav-close" href="#tab/3" onclick="ctab('tab3','教程&交互学习场')">教程&交互学习场</a></li>
            <li><a class="waves-effect waves-teal sidenav-close" href="#tab/4" onclick="ctab('tab4','关于')">关于</a></li>
        </ul>
    </header>
    <main id="main">
        <!--主页，没有标题-->
        <div class="container" id="tab1">
            <div class="row center">
                <div class="col s12 m10 offset-m1">
                    <h1 style="margin-top: 107px;" class="header pink-font">工商喵软件站！</h1>
                </div>
                <div class="col s12 m8 offset-m2">
                    <h4 class="light"></h4>
                </div>
            </div>
            <div class="row center">
                <a class="btn-large waves-effect waves-light" onclick="lastread()" id="lastread">继续之前的阅读</a>
            </div>
            <div class="row center">
                <p>主程序版本Ver0，数据版本Data0</p>
            </div>
            <div class="row">
                <div class="col s12 m4 l4">
                    <div class="card">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="activator" src="img/noval.jpg">
                        </div>
                        <div class="card-content">
                            <span class="card-title activator grey-text text-darken-4">教程&交互学习场<i
                                    class="material-icons right">more_vert</i></span>
                            <p><a href="#!" onclick="randomread()">手气不错</a></p>
                        </div>
                        <div class="card-reveal">
                            <span class="card-title grey-text text-darken-4">教程&交互学习场<i
                                    class="material-icons right">close</i></span>
                            <p>学习知识，丰富自己
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col s12 m4 l4">
                    <div class="card">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="activator" src="img/lgame.jpg">
                        </div>
                        <div class="card-content">
                            <span class="card-title activator grey-text text-darken-4">软件下载<i
                                    class="material-icons right">more_vert</i></span>
                            <p><a href="#tab/3" onclick="ctab('tab2','软件下载')">跳转</a></p>
                        </div>
                        <div class="card-reveal">
                            <span class="card-title grey-text text-darken-4">软件下载<i
                                    class="material-icons right">close</i></span>
                            <p>海纳百川，有容乃大
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col s12 m4 l4">
                    <div class="card">
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="activator" src="img/btbu.png">
                        </div>
                        <div class="card-content">
                            <span class="card-title activator grey-text text-darken-4">北工商<i
                                    class="material-icons right">more_vert</i></span>
                            <p><a href="http://www.btbu.edu.cn">点此访问北工商首页</a></p>
                        </div>
                        <div class="card-reveal">
                            <span class="card-title grey-text text-darken-4">北工商<i
                                    class="material-icons right">close</i></span>
                            <p>北京工商大学
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--小说-->
        <div class="container" id="tab2">
            <div class="row">
                <p>加载中</p>
            </div>
        </div>
        <!--小游戏-->
        <div class="container" id="tab3">
            <div class="row">
                <div class="col s12 m6 l4">
                    <div class="card">
                        <div class="card-image">
                            <img src="img/lgame.jpg">
                            <span class="card-title">第一个小游戏</span>
                        </div>
                        <div class="card-content">
                            <p>没有内容</p>
                        </div>
                        <div class="card-action">
                            <a href="#!" onclick="lgame('G1')">继续游戏</a>
                        </div>
                    </div>
                </div>
                <div class="col s12 m6 l4">
                    <div class="card">
                        <div class="card-image">
                            <img src="img/noval.jpg">
                            <span class="card-title" style="color: white;">关于</span>
                        </div>
                        <div class="card-content">
                            <p>示例</p>
                        </div>
                        <div class="card-action">
                            <a href="#modal/noval/acted_mainline" onclick="modal('noval/acted_mainline')">教程列表</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--关于和聊天-->
        <div class="container" id="tab4">
            <p>从各种角度来说，这都是一个测试版本。就是这样！</p>
            <p>项目代码以Apache2.0协议开源，但本项目内的图片、小说并不在此协议授权范围内。</p>
            <p>欢迎投稿软件！请联系love&peace@huanxiangxiang.zima</p>
            <p>图片资源来自<a href="https://www.pexels.com">https://www.pexels.com</a></p>
            <div id="chatbro"></div>
        </div>
    </main>
    <footer id="footer">
        <div class="container">
            <hr>
            <div class="row">
                <div class="col s12 m10 offset-m1">
                    <div class="commit">
                        喵~
                        <button id="github-button"
                            onclick="modal('setting',function(){SettingCKBLoad('setting-pic','setting-pic');SettingCKBLoad('setting-notime','setting-notime');});"
                            class="btn right waves-effect waves-light">设置</button>
                    </div>
                </div>
            </div>
        </div>
    </footer>


    <!--拟态框-->
    <div id="modal" class="modal modal-fixed-footer">
        <div class="modal-content">
            <h4 id="info_header">Modal Header</h4>
            <span id="info_content">A bunch of text</span>
        </div>
        <div class="modal-footer" id="info_footer">
            <a href="#!" class="modal-close waves-effect waves-green btn-flat">关闭</a>
        </div>
    </div>
    <div id="modalb" class="modal bottom-sheet">
        <div class="modal-content">
            <h4 id="botm_header">Modal Header</h4>
            <p id="botm_content">A bunch of text</p>
        </div>
        <div class="modal-footer" id="botm_footer">
            <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
        </div>
    </div>

    <!--弹出动画型div-->
    <div id="test-active-bkgdiv" onclick="ClsPicOff()"></div>
    <div id="test-active" class="z-depth-2">
        <h1>滑稽</h1>
        <p>这里应该有滑稽内容</p>
        <button class="waves-effect waves-light btn" onclick="ClsPicOff()">滑稽</button>
    </div>
    </div>
</body>



</html>
